<template>
    <view :style="{ '--color': color }" class="Moneyall">
        <navBar :title="title" :bgColor="bgColor" :transparent="false" color="#fff"></navBar>

        <view class="MoneyBox">
            <view class="Money" :style="{ backgroundImage: 'url(' + purse.balance_index_bj + ')' }">
                <view class="Money_account">
                    <view class="d-flex f-column white" @click="toUrl(`/moneyPage/capital/recharge_Info`)">
                        <text class="size32">账户{{ nameDefinition.balanceTitle }}（{{ nameDefinition.balanceUnit }}）</text>
                        <view class="d-flex a-center m-top10">
                            <text class="size54 bold">{{ purse.v_money }}</text>
                            <view class="iconfont icon-a-zujian32 h6 m-left20"></view>
                        </view>
                    </view>
                    <view class="d-flex f-column a-center white" @click="toUrl(`payment`)">
                        <view class="iconfont icon-fukuanma white size60"></view>
                        <text class="h6 m-top8">付款码</text>
                    </view>
                </view>
            </view>
        </view>

        <view class="content">
            <view class="Topup_activity" v-if="activitys.length">
                <text class="black size32">选择充值金额</text>
                <view class="Topup_activity_box">
                    <view class="activity_list" @click="activitysId = item.id" :class="{ Active: activitysId == item.id }" v-for="item in activitys" :key="item.id">
                        <text class="money_val">￥{{ item.limit }}</text>
                        <text class="explain ellipsis_3">{{ item.desc }}</text>
                    </view>
                </view>
            </view>

            <view class="row j-centert a-center" @click="recharge">
                <text class="Custom_title">{{ SumTitle }}</text>
                <view class="iconfont icon-a-zujian32 color size22 m-left10"></view>
            </view>

            <view class="Instructions" v-if="purse.recharge_rule">
                <text class="black size32">余额说明</text>
                <view class="rows m-top30">
                    <u-parse :content="purse.recharge_rule" :domain="imgUrl"></u-parse>
                </view>
            </view>
        </view>

        <view class="topUp" v-if="activitys.length">
            <view class="topUp_btn" @click="handleRecharge">
                <text class="size32">立即充值</text>
                <text class="size32" v-if="Sum">￥{{ Sum }}</text>
            </view>
        </view>
    </view>
</template>

<script>
import { mapState } from 'vuex'
import Api from '@/common/Api.js'
export default {
    data() {
        return {
            imgUrl: this.imgUrl,
            purse: '',
            activitys: [],
            activitysId: '',
            Shut: 0, // 闭合
            bgColor: ''
        }
    },
    onLoad() {
        this.myMoney()
    },
    onShow() {
        let options = wx.getEnterOptionsSync()
        if (options.scene == '1038' && options.referrerInfo.appId == 'wxef277996acc166c3' && this.Shut == 1) {
            let extraData = options.referrerInfo.extraData
            if (!extraData) return
            if (extraData.code == 'success') {
                this.$Toast('充值成功')
                this.myMoney()
            }
        }
    },
    methods: {
        async myMoney() {
            const result = await Api.myMoney()
            this.purse = result
            this.activitys = result.activitys || []
            if (this.activitys.length) this.activitysId = this.activitys[0].id
        },

        async handleRecharge() {
            if (!this.activitysId) return
            this.$showLoading('')
            const reponse = this.activitys.find((item) => item.id == this.activitysId)
            const result = await Api.recharge(reponse.limit, reponse.aesId, reponse.aesVerifyCode)
            this.$hideLoading()
            if (result.extraData) {
                this.Shut = 1
                wx.openEmbeddedMiniProgram({
                    appId: result.appId,
                    extraData: result.extraData
                })
                return
            }
            const Payment = await this.$pop.getPayment(result)
            if (Payment) this.myMoney()
        },

        recharge() {
            this.$http
                .get({
                    url: '/SRA_memberRecharge/config',
                    data: {
                        vId: this.vid,
                        VeriCode: this.bid
                    }
                })
                .then((res) => {
                    if (res.code != '100') return this.$Toast(res.notice)
                    const result = res.data
                    if (!result || (result.myJson && result.myJson.rechargeState == 0)) return this.$Toast(`抱歉！您不能充值~~`)
                    this.toUrl(`/moneyPage/capital/recharge`)
                })
        }
    },
    computed: {
        ...mapState(['color', 'nameDefinition', 'vid', 'bid', 'share']),
        title() {
            return `我的${this.nameDefinition.balanceTitle}`
        },
        Sum() {
            if (!this.activitysId) return
            const result = this.activitys.find((item) => item.id == this.activitysId)
            return result.limit
        },
        SumTitle() {
            return this.activitys.length ? '自定义金额' : '去充值'
        }
    },
    onShareAppMessage(option) {
        return {
            title: this.share.title,
            desc: this.share.desc,
            path: '/pages/index/index?share_v_id=' + this.vid,
            imageUrl: this.share.imageUrl
        }
    },
    onPageScroll(e) {
        if (e.scrollTop > 200) {
            this.bgColor = this.color
        } else {
            this.bgColor = ''
        }
    },
    onUnload() {
        this.Shut = 0
    }
}
</script>
<style scoped lang="scss">
.Moneyall {
    width: 100%;
    padding-bottom: 160rpx;
}

.MoneyBox {
    width: 100%;
    background-color: var(--color);
}

.Money {
    width: 100%;
    // #ifdef MP-WEIXIN
    padding: 230rpx 50rpx 50rpx 50rpx;
    // #endif
    // #ifdef H5
    padding: 160rpx 50rpx 50rpx 50rpx;
    // #endif
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.Money_account {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-content: center;
}

.content {
    width: 100%;
    background-color: #ffffff;
    padding: 50rpx;
    margin-top: -20rpx;
    border-radius: 20rpx 20rpx 0 0;
}

.Topup_activity {
    width: 100%;
}

.Topup_activity_box {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 40rpx;
    margin-top: 30rpx;
    margin-bottom: 40rpx;
}

.activity_list {
    width: 100%;
    height: 220rpx;
    padding: 10rpx;
    border: 1px solid #cccccc;
    border-radius: 10rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.money_val {
    color: #000;
    font-size: 52rpx;
}

.explain {
    color: var(--color);
    font-size: 26rpx;
    margin-top: 10rpx;
    text-align: center;
}

.Active {
    border: 1px solid var(--color) !important;
}

.Custom_title {
    color: var(--color);
    font-size: 26rpx;
}

.Instructions {
    width: 100%;
    margin-top: 30rpx;
}

.topUp {
    width: 100%;
    background-color: #ffffff;
    padding: 20rpx 40rpx 60rpx 40rpx;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 666;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7rpx 29rpx 0px;
}

.topUp_btn {
    width: 100%;
    height: 80rpx;
    background-color: var(--color);
    border-radius: 10rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    font-size: 30rpx;
}
</style>
